<template>
    <Layout>
        <div 
            class="main-container" 
            v-load="isLoading"
            @scroll="handleScroll" 
            ref="mainScrollContainerRef"  
        >
            <BlogDetail :blog="blogRef" v-if="blogRef"></BlogDetail>
            <BlogComment v-if="!isLoading"/>
        </div>
        <template #right>
            <div class="right-container" v-load="isLoading">
                <BlogToc :toc="blogRef.toc" v-if="blogRef" />
            </div>
        </template>
    </Layout>
</template>
<script setup lang='ts'>
import Layout from '~@/components/Layout/index.vue'
import BlogDetail from './components/BlogDetail.vue';
import BlogToc from './components/BlogToc.vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { TypeApiBlogDetailI } from '~@/api/apiTypes';
import { vLoad } from '~@/directives/loading/loadingDirective';
import { getBlog } from '~@/api/blog';
import { useRoute } from 'vue-router';
import BlogComment from './components/BlogComment.vue';
import { $bus, bindSetScrollEvent } from '~@/bus/busIndex';
import { setRouteTitle } from '~@/untils/titleController';
import router from '~@/router/routerIndex';
    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion

const blogRef=ref<TypeApiBlogDetailI>();
const isLoading=ref(true);

onMounted(async ()=>{
    // blogRef.value=await getBlog(new Number(useRoute().params.id).valueOf());
    isLoading.value=true;
    blogRef.value=await getBlog(+useRoute().params.id);
    if(!blogRef.value){
        router.push({name:'notFound'})
    }


    isLoading.value=false;

    setRouteTitle(blogRef.value.title)

    const hash=location.hash;
    location.hash='';
    setTimeout(()=>{
        location.hash=hash;
    },50);
});


const handleSetMainScroll=(scrollTop:number)=>{
    if(mainScrollContainerRef.value){
        mainScrollContainerRef.value.scrollTop=scrollTop;
    }
}

bindSetScrollEvent(handleSetMainScroll);

const mainScrollContainerRef=ref<HTMLElement>()

const handleScroll=()=>{
    $bus.emit('mainScroll',mainScrollContainerRef.value);
};



    
</script>
<style lang='less' scoped>
.main-container{
    // overflow-y: scroll;
    // overflow-x: hidden;
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
    width: 100%;
   
    scroll-behavior: smooth;
}
.right-container {
  width: 300px;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  position: relative;
  padding: 20px;
}
</style>